<template>
  <a-drawer
    :title="title"
    :width="$store.getters.isMobile ? 350 : 1280"
    :visible="visible"
    :body-style="{
      height: $store.getters.isMobile
        ? 'calc(100% - 115px)'
        : 'calc(100% - 55px)',
      boxSizing: 'border-box',
      overflowY: 'auto',
    }"
    :maskClosable="true"
    @close="onClose"
    :destroyOnClose="true"
  >
    <section style="height: 100%">
      <a-spin :spinning="roomGetDetail">
        <a-row style="height: 100%" :gutter="16">
          <a-col
            style="padding-top: 20px"
            :span="$store.getters.isMobile ? 24 : 16"
          >
            <a-descriptions
              title=""
              layout="vertical"
              :column="$store.getters.isMobile ? 3 : 4"
              :colon="false"
              :labelStyle="{ color: 'rgba(0,0,0,0.4)' }"
            >
              <a-descriptions-item>
                <template #label>
                  <span>{{ $L("项目") }}</span>
                </template>
                {{ detail.village_name }}</a-descriptions-item
              >
              <a-descriptions-item>
                <template #label>
                  <span>{{ $L("楼宇") }}</span> </template
                >{{ detail.build_name }}</a-descriptions-item
              >
              <a-descriptions-item label="楼层">{{
                detail.layer_name
              }}</a-descriptions-item>
              <a-descriptions-item label="房号">{{
                detail.room_name
              }}</a-descriptions-item>
              <a-descriptions-item>
                <template #label>
                  <span>{{ $L("房源") }}备案号</span>
                </template>
                {{ detail.record_no }}</a-descriptions-item
              >
            </a-descriptions>
            <a-divider />
            <a-descriptions
              title=""
              layout="vertical"
              :column="$store.getters.isMobile ? 3 : 4"
              :colon="false"
              :labelStyle="{ color: 'rgba(0,0,0,0.4)' }"
            >
              <a-descriptions-item label="建筑面积"
                >{{ detail.build_area || "--" }}㎡</a-descriptions-item
              >
              <a-descriptions-item>
                <template #label>
                  <span>{{ $L("计租面积") }}</span>
                  <text-tip
                    :tips="['用于合同计算租金的面积']"
                    :showNo="false"
                  />
                </template>
                {{ detail.rental_area || "--" }}㎡
              </a-descriptions-item>
              <a-descriptions-item>
                <template #label>
                  <span>计费面积</span>
                  <text-tip
                    :tips="['用于合同计算物业费的面积，若为空则取计租面积']"
                    :showNo="false"
                  />
                </template>
                {{ detail.charging_area || "--" }}㎡
              </a-descriptions-item>
              <a-descriptions-item label="套内面积"
                >{{ detail.inside_area || "--" }}㎡</a-descriptions-item
              >
              <a-descriptions-item :label="$L('房源') + '类型'">
                {{ detail.house_type_txt }}</a-descriptions-item
              >
            </a-descriptions>
            <a-divider />
            <a-descriptions
              title=""
              layout="vertical"
              :column="$store.getters.isMobile ? 3 : 4"
              :colon="false"
              :labelStyle="{ color: 'rgba(0,0,0,0.4)' }"
            >
              <a-descriptions-item label="租赁状态">{{
                detail.room_status_txt
              }}</a-descriptions-item>
              <a-descriptions-item label="招商状态">{{
                detail.invitation_status_txt
              }}</a-descriptions-item>
              <a-descriptions-item label="可租日期">{{
                detail.lease_end
              }}</a-descriptions-item>
              <a-descriptions-item label="装修情况">{{
                detail.decoration_txt
              }}</a-descriptions-item>
              <a-descriptions-item :label="$L('房源') + '状态'">
                {{ detail.status_txt }}</a-descriptions-item
              >
              <a-descriptions-item :label="$L('报价')"
                >{{ detail.pre_unit_price
                }}{{ detail.price_unit_txt }}</a-descriptions-item
              >
              <a-descriptions-item label="层高">{{
                detail.floor_height
              }}</a-descriptions-item>
              <a-descriptions-item label="荷载值">{{
                detail.load_max
              }}</a-descriptions-item>
              <a-descriptions-item label="产权性质">{{
                detail.property_right_txt
              }}</a-descriptions-item>
            </a-descriptions>
            <span class="title"> {{ $L("房源") }}标签 </span>
            <span>
              <TagList :list="detail.tag_arr" :type="2" />
            </span>
            <!-- 合同列表 -->
            <a-row
              style="margin-top: 30px"
              :span="24"
              type="flex"
              justify="space-between"
            >
              <a-col :span="24">
                <span class="title-list">合同列表</span>
              </a-col>
            </a-row>
            <a-row :gutter="16" style="margin-bottom: 20px">
              <a-col :span="24">
                <a-table
                  :style="{
                    marginTop: '10px',
                    marginBottom: $store.getters.isMobile ? '10px' : '40px',
                  }"
                  :columns="columns"
                  rowKey="id"
                  :dataSource="contractList"
                  :scroll="{
                    x: 'max-content',
                    y: $store.getters.isMobile ? 550 : true,
                  }"
                  :pagination="false"
                >
                  <template #bodyCell="{ text, record, index, column }">
                    <template v-if="column.key === 'name'">
                      {{ record.ownerData.name }}
                    </template>
                    <template v-if="column.key === 'contactName'">
                      <span v-if="record.ownerData.owner_contact">
                        {{ record.ownerData.owner_contact.name }}
                      </span>
                    </template>
                    <template v-if="column.key === 'phone'">
                      <span v-if="record.ownerData.owner_contact">
                        {{ record.ownerData.owner_contact.phone }}
                      </span>
                    </template>
                    <template v-if="column.key === 'leaseArea'">
                      <span>{{ record.leaseArea }}m²</span>
                    </template>
                    <template v-if="column.key === 'propertyArea'">
                      <span>{{ record.propertyArea }}m²</span>
                    </template>
                    <template v-if="column.key === 'leaseStartTime'">
                      <span
                        >{{ record.leaseStartTime }}-{{
                          record.leaseEndTime
                        }}</span
                      >
                    </template>
                    <template v-if="column.key === 'statusName'">
                      <span>{{ record.statusName }}</span>
                    </template>
                  </template>
                </a-table>
              </a-col>
            </a-row>

            <!-- 成本合同列表 -->
            <a-row
              style="margin-top: 30px"
              :span="24"
              type="flex"
              justify="space-between"
              v-if="costContractList.length > 0"
            >
              <a-col :span="24">
                <span class="title-list">执行中的成本合同</span>
              </a-col>
            </a-row>
            <a-row :gutter="16" v-if="costContractList.length > 0">
              <a-col :span="24">
                <a-table
                  :style="{
                    marginTop: '10px',
                    marginBottom: $store.getters.isMobile ? '20px' : '60px',
                  }"
                  :columns="costColumns"
                  rowKey="id"
                  :dataSource="costContractList"
                  :scroll="{ x: 'max-content', y: 292 }"
                  :pagination="false"
                >
                </a-table>
              </a-col>
            </a-row>
          </a-col>
          <a-col
            style="background: rgb(245, 245, 245); padding: 0 15px 0 15px"
            :span="$store.getters.isMobile ? 24 : 8"
          >
            <span style="line-height: 60px" class="title-list">操作记录</span>
            <a-textarea
              v-model:value="remark"
              placeholder="请输入备注信息"
              :rows="4"
            />
            <a-row
              style="margin-top: 10px"
              :span="24"
              type="flex"
              justify="end"
            >
              <a-col :span="4">
                <a-button
                  style="color: blue; border-color: blue"
                  @click="addRemarks()"
                >
                  添加
                </a-button>
              </a-col>
            </a-row>
            <a-row
              class="list_item"
              style="margin-top: 10px"
              :span="24"
              type="flex"
              justify="end"
              v-for="item of remarksList"
              :key="item.id"
            >
              <a-col :span="24" flex class="flex_row">
                <a-avatar style="flex-shrink: 0" :src="item.avatar" />
                <div class="right_info">
                  <div class="text_box">
                    <span>{{ item.realname }}</span>
                    <span class="text_1">{{ item.created_at }}</span>
                  </div>
                </div>
              </a-col>
              <a-col :span="24" flex class="flex_row_1">
                <span class="text_1">添加了备注</span>
                <span>{{ item.remark }}</span>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-spin>
    </section>

    <div :class="$store.getters.isMobile ? 'drawer-footer' : 'footer-class'">
      <a-row :gutter="16">
        <a-col :span="24">
          <a-button
            type="primary"
            style="float: left"
            v-if="
              (detail.room_status < 10 && detail.is_lock == 0) ||
              (detail.contract_button == 1 && detail.is_lock == 0)
            "
            @click="enterContract"
          >
            录入合同
          </a-button>
          <a-space>
            <!-- 合并拆分 start -->
            <a-tooltip>
              <template #title>
                <span v-if="divideDisable">
                  {{
                    detail.is_lock == 1
                      ? "当前房间已锁定"
                      : detail.room_status != 0
                      ? "当前房间非空置状态"
                      : "当前房间还未维护计租面积等面积值"
                  }}
                </span>
              </template>
              <a-button :disabled="divideDisable" @click="mergeRoom">
                合并
              </a-button>
            </a-tooltip>

            <a-tooltip>
              <template #title>
                <span v-if="divideDisable">
                  {{
                    detail.is_lock == 1
                      ? "当前房间已锁定"
                      : detail.room_status != 0
                      ? "当前房间非空置状态"
                      : "当前房间还未维护计租面积等面积值"
                  }}
                </span>
              </template>
              <a-button :disabled="divideDisable" @click="divideRoom">
                拆分
              </a-button>
            </a-tooltip>

            <!-- 合并拆分 end -->
            <a-popover
              v-model:visible="lockingVisible"
              :title="
                detail.is_lock == 1
                  ? `取消锁定${lockingText}`
                  : `锁定${lockingText}`
              "
              trigger="click"
            >
              <template #content>
                <a-textarea
                  v-model:value="lock_reason"
                  :rows="3"
                  :placeholder="
                    detail.is_lock == 1
                      ? '请输入取消锁定原因'
                      : '请输入锁定原因'
                  "
                  style="width: 280px"
                  allow-clear
                >
                </a-textarea>
                <a-row type="flex" justify="end" style="margin-top: 10px">
                  <a-space>
                    <a-button size="small" @click="lockingHide">取消</a-button>
                    <a-button
                      type="primary"
                      size="small"
                      @click="lockingSubmit(detail.is_lock)"
                      >确定</a-button
                    >
                  </a-space>
                </a-row>
              </template>
              <a-button
                style="margin-right: 8px"
                @click="lockingClick"
                v-if="detail.room_status < 10"
                >{{ detail.is_lock == 1 ? "取消锁定" : "锁定" }}</a-button
              >
            </a-popover>
            <a-button
              :disabled="!detail.room_status < 10 && detail.is_lock == 1"
              @click="onDel"
              >删除</a-button
            >
            <a-button type="primary" @click="onedit">编辑</a-button>
          </a-space>
        </a-col>
      </a-row>
      <!-- <a-col class="drawer-footer">
               <a-button  class="mr-10" @click="onDel">删除</a-button>
          <a-button type="primary" @click="onedit">编辑</a-button>
        </a-col> -->
    </div>
  </a-drawer>
  <add-house
      v-if="buildingEditVisible"
    :visible="buildingEditVisible"
    :id="currentBuildingId"
    :villageId="currentBuildingVillageId"
    @cancel="handleBuildingClose"
    @success="handleBuildingSuccess"
    :roomID="roomIDList"
  ></add-house>

  <!-- 拆分 -->
  <DivideRoom
    :visible="divideVisible"
    :parentRoom="detail"
    :maxRoomNumber="maxRoomNumber"
    @close="divideVisible = false"
    @success="divideRoomSuccess"
  />

  <!-- 合并弹窗 -->
  <a-modal
    :visible="mergeVisible"
    title="合并房源"
    @cancel="mergeVisible = false"
    @ok="mergeSubmit"
    centered
    :confirmLoading="mergeSubmitLoading"
  >
    <a-form>
      <a-row>
        <a-col :span="24">
          <a-alert
            show-icon
            type="warning"
            message="合并到目标房源后本房源会被删除，请谨慎操作！"
          ></a-alert>
        </a-col>
        <a-col :span="24" style="margin-top: 20px">
          <a-form-item label="合并到房间">
            <a-select v-model:value="mergeRoomId" placeholder="请选择目标房源">
              <a-select-option
                v-for="item of allRoomList"
                :key="item.id"
                :value="item.id"
              >
                <span>{{ item.room_name }}</span>
                <span
                  style="color: rgba(0, 0, 0, 0.5); margin-left: 10px"
                  v-if="item.room_status_txt"
                >
                  （{{ item.room_status_txt }}）
                </span>
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="是否合并房源面积">
            <template #label>
              <span>是否合并房源面积</span>
              <text-tip tips="开启后，被合并的房源会增加合并房源的面积" />
            </template>
            <a-switch
              v-model:checked="mergeArea"
              :checkedValue="1"
              :unCheckedValue="0"
              checked-children="开"
              un-checked-children="关"
            ></a-switch>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script>
// import { PlusOutlined } from '@ant-design/icons-vue';
import { defineComponent, computed, ref, watch, createVNode } from "vue";
import { Form, message } from "ant-design-vue";
import request from "../../../../common/utils/request";
import AddHouse from "./AddHouse.vue";
import { Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import TagList from "../../../../components/Tag/show.vue";
import BLCOMMON from "bl-common-vue3";
import DivideRoom from "./DivideRoom.vue";
import { TextTip } from "bl-common-vue3";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "HouseResourceDetails",
  emits: ["cancel", "success", "clearBtn"],
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
    id: {
      type: [String, Number],
      default: 0,
    },
    villageId: {
      type: [String, Number],
      default: 0,
    },
    roomId: {
      type: [String, Number],
      default: 0,
    },
    maxRoomNumber: {
      type: Number,
      default: 0,
    },
  },
  components: {
    AddHouse,
    // DiffOutlined,
    TextTip,
    TagList,
    DivideRoom,
  },

  setup(props, context) {
    const $router = useRouter();

    const onCancel = () => {
      context.emit("success");
    };
    // 编辑按钮
    const currentBuildingId = ref(0);
    const currentBuildingVillageId = ref(0);
    const roomIDList = ref(0);
    const onedit = () => {
      currentBuildingId.value = props.id ? props.id : 0;
      currentBuildingVillageId.value = props.villageId ? props.villageId : 0;
      roomIDList.value = props.roomId ? props.roomId : 0;
      buildingEdit();
    };
    const buildingEditVisible = ref(false);
    const buildingEdit = () => {
      buildingEditVisible.value = true;
    };
    const handleBuildingClose = () => {
      buildingEditVisible.value = false;
    };
    const handleBuildingSuccess = () => {
      buildingEditVisible.value = false;
      init();
      getContract();
      context.emit("clearBtn");
    };
    const onClose = () => {
      context.emit("cancel");
    };
    // 删除按钮
    const Modals = ref(false);
    const onDel = () => {
      const success = (res) => {
        message.success(res.msg || "删除成功！");
        context.emit("success");
      };
      Modals.value = true;
      Modal.confirm({
        title: `确认删除该${BLCOMMON.utils.L("房源")}信息么`,
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确认",
        cancelText: "取消",
        onOk() {
          request
            .del("/village", "/project/room", {
              id: props.id,
              village_id: props.villageId,
            })
            .then((res) => {
              success(res);
              handleBuildingClose();
            });
        },
      });
    };
    // 添加备注
    const remark = ref("");
    const addRemarks = () => {
      request
        .post("/village", "/roomRemarks/add", {
          room_id: props.id,
          village_id: props.villageId,
          remark: remark.value,
        })
        .then((res) => {
          message.success(res.msg || "添加成功！");
          remark.value = "";
          getRemarksList();
        });
    };
    // 备注列表
    const remarksList = ref([]);
    const getRemarksList = () => {
      console.log("getRemarksList", props);
      request
        .get("/village", "/roomRemarks/list", {
          room_id: props.id,
          village_id: props.villageId,
        })
        .then((res) => {
          remarksList.value = res.list;
        });
    };
    // 获取详情
    const detail = ref({});
    const roomGetDetail = ref(false);
    const getDetail = () => {
      roomGetDetail.value = true;
      request
        .get("/village", "/project/room/get", {
          id: props.id,
          village_id: props.villageId,
        })
        .then((res) => {
          detail.value = res.detail;
          roomGetDetail.value = false;
        });
    };
    // 锁定房源
    const lockingVisible = ref(false);
    const lockingText = computed(() => {
      return BLCOMMON.utils.L("房源");
    });
    const lock_reason = ref("");
    const lockingClick = () => {
      lockingVisible.value = true;
    };
    const lockingHide = () => {
      lockingVisible.value = false;
      lock_reason.value = "";
    };
    const lockingSubmit = (is_lock) => {
      if (lock_reason.value == "") {
        if (is_lock == 1) {
          message.warning("请输入取消锁定原因");
        } else {
          message.warning("请输入锁定原因");
        }
        return;
      }
      request
        .post("/village", "/project/room/lock", {
          id: props.id,
          village_id: props.villageId,
          lock_reason: lock_reason.value,
          is_lock: is_lock == 1 ? 0 : 1,
        })
        .then((res) => {
          message.success("修改成功");
          lockingVisible.value = false;
          init();
          getContract();
          lock_reason.value = "";
        });
    };

    // 录入合同
    const enterContract = () => {
      if (window.__MICRO_APP_ENVIRONMENT__) {
        let microAppUrl = `/contract/addContract?room_id=${props.id}&village_id=${props.villageId}&layer_id=${detail.value.layer_id}&build_id=${detail.value.build_id}`
        window.microApp.forceDispatch({
          type: "SetMicroPages",
          microInfo: {
            microId: `org_add_contract_${props.id}_${props.villageId}_${detail.value.layer_id}_${detail.value.build_id}`,
            app: 'org',
            name: `创建合同`,
            url: microAppUrl,
          }
        })
      }
    };

    /** 拆分合并房间 */
    // 是否可拆分合并
    const divideDisable = computed(
      () =>
        detail.value.is_lock == 1 ||
        detail.value.room_status != 0 ||
        !detail.value.rental_area
    );
    // 拆分房间
    const divideVisible = ref(false);
    const divideRoom = () => {
      divideVisible.value = true;
    };
    const divideRoomSuccess = () => {
      divideVisible.value = false;
      init();
    };
    // 合并房间
    const mergeVisible = ref(false);
    const mergeRoom = () => {
      getAllRoomList();
      mergeVisible.value = true;
    };
    const mergeRoomId = ref(undefined);
    const mergeArea = ref(1);
    const mergeSubmitLoading = ref(false);
    const mergeSubmit = () => {
      if (!mergeRoomId.value) {
        message.warning("请先选择要合并的目标房源！");
        return;
      }
      mergeSubmitLoading.value = true;
      request
        .post("/village", "/project/room/merge", {
          village_id: props.villageId,
          id: detail.value.id,
          merge_room_id: mergeRoomId.value,
          merge_area: mergeArea.value,
          needMsg: true,
        })
        .then((res) => {
          message.success(res.msg || "操作成功");
          mergeVisible.value = false;
          setTimeout(() => {
            onCancel();
          }, 500);
        })
        .finally(() => {
          mergeSubmitLoading.value = false;
        });
    };
    const allRoomList = ref([]);
    const getAllRoomList = () => {
      if (allRoomList.value.length) {
        return;
      }
      request
        .get("/village", "/project/room/all", {
          village_id: props.villageId,
          layer_id: detail.value.layer_id,
        })
        .then((res) => {
          allRoomList.value = res.list.filter((it) => it.id != detail.value.id);
        });
    };

    // 合同列表
    // 渲染表格
    // 分页
    const page = ref(1);
    const limit = ref(10);
    const total = ref(0);
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: limit.value,
      showSizeChanger: true,
    }));
    const loading = ref(false);
    watch([page, limit], () => {
      // gethouseList();
    });
    // const contractList = ref({});
    const getContractList = () => {
      request
        .post("/village", "/contract/contractList", {
          id: props.id,
          village_id: props.villageId,
        })
        .then((res) => {
          // contractList.value = res;
        });
    };

    // 合同表格
    const columns = [
      {
        title: BLCOMMON.utils.L("租客") + "名称",
        dataIndex: "name",
        key: "name",
        width: 130,
      },
      {
        title: BLCOMMON.utils.L("租客") + "联系人",
        dataIndex: "contactName",
        key: "contactName",
        width: 130,
      },
      {
        title: "手机号",
        dataIndex: "phone",
        key: "phone",
        width: 130,
      },
      {
        title: "租赁面积",
        dataIndex: "leaseArea",
        key: "leaseArea",
        width: 130,
      },
      {
        title: "物业面积",
        dataIndex: "propertyArea",
        key: "propertyArea",
        width: 130,
      },
      {
        title: "起止日期",
        dataIndex: "leaseStartTime",
        key: "leaseStartTime",
        width: 180,
      },
      {
        title: "状态",
        dataIndex: "statusName",
        key: "statusName",
        width: 130,

        fixed: "right",
      },
    ];
    const contractList = ref([]);
    const getContract = () => {
      request
        .get("/org", "/room/getContract", { room_id: props.id })
        .then((res) => {
          contractList.value = res.data;
        });
    };

    const costContractList = ref([]);
    const getCostContract = () => {
      request
        .get("/org", "/room/getCostContractByRoom", { room_id: props.id })
        .then((res) => {
          costContractList.value = res.contractList;
        });
    };

    const costColumns = computed(() => {
      return [
        {
          title: "业主名称",
          width: 150,
          customRender: ({ record }) => {
            return record.proprietor_info && record.proprietor_info.name
              ? record.proprietor_info.name
              : " - ";
          },
        },
        {
          title: "业主联系人",
          width: 150,
          customRender: ({ record }) => {
            return record.proprietor_info && record.proprietor_info.link_name
              ? record.proprietor_info.link_name
              : " - ";
          },
        },
        {
          title: "业主手机号",
          width: 150,
          customRender: ({ record }) => {
            return record.proprietor_info && record.proprietor_info.phone
              ? record.proprietor_info.phone
              : " - ";
          },
        },
        {
          title: "合同类型",
          dataIndex: "type",
          width: 150,
          customRender: ({ record }) => {
            return record.type_txt ? record.type_txt : " - ";
          },
        },
        {
          title: "计租方式",
          dataIndex: "lease_mode_txt",
          width: 150,
          customRender: ({ record }) => {
            return record.lease_mode_txt ? record.lease_mode_txt : " - ";
          },
        },
        {
          title: "租期时间",
          width: 250,
          customRender: ({ record }) => {
            return record.leaseStartTime && record.leaseEndTime
              ? record.leaseStartTime + " ~ " + record.leaseEndTime
              : "-";
          },
        },
        {
          title: "合同编号",
          dataIndex: "contract_number",
          width: 250,
        },
      ];
    });

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
          getContract();
          getCostContract();
        }
      }
    );

    const title = computed(() => {
      return BLCOMMON.utils.L("房源") + "信息";
    });

    const init = () => {
      if (props.id) {
        getDetail();
        // getContractList();
        getRemarksList();
      }
    };
    return {
      detail,
      buildingEditVisible,
      currentBuildingId,
      currentBuildingVillageId,
      columns,
      contractList,
      remark,
      remarksList,
      handleBuildingSuccess,
      handleBuildingClose,
      getRemarksList,
      addRemarks,
      onCancel,
      onClose,
      onedit,
      onDel,
      roomIDList,
      title,

      lockingClick,
      lockingVisible,
      lockingText,
      lock_reason,
      lockingHide,
      lockingSubmit,
      roomGetDetail,

      enterContract,
      costColumns,
      costContractList,

      divideDisable,
      divideVisible,
      divideRoom,
      divideRoomSuccess,
      mergeVisible,
      mergeRoom,
      mergeArea,
      mergeRoomId,
      mergeSubmit,
      allRoomList,
      mergeSubmitLoading,
    };
  },
});
</script>

<style lang="less" scoped>
.title {
  margin-top: 20px;
  margin-bottom: 4px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  display: block;
}
.title-list {
  line-height: 32px;
  text-align: center;
}
.list_item {
  background-color: #ffffff;
  border-radius: 5px;
  padding: 10px;
  .flex_row {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f1f1;
    .right_info {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      .text_box {
        display: flex;
        justify-content: space-between;
        .text_1 {
          font-size: 14;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
  }
  .flex_row_1 {
    display: flex;
    flex-direction: column;
    .text_1 {
      font-size: 14;
      color: rgba(0, 0, 0, 0.45);
      margin-top: 10px;
    }
  }
}

.ant-divider-horizontal {
  margin: 12px 0 24px;
}
.tags {
  height: 8px;
  background-color: #f1f3f4;
  margin-right: 5px;
  border-radius: 5px;
  padding: 2px 5px;
}
.footer-class {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 835px;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: right;
  z-index: 1;
}
.drawer-footer {
  width: 350px;
}
</style>
